<template>
    <div :style="{ backgroundColor: bg }" class="navbar">
        <div @click="pathBack" :style="{ opacity: back ? 1 : 0, backgroundColor: color }" class="navbar__left"><van-icon
                v-show="back" size="20rem" name="arrow-left" color="var(--font-color)" />
        </div>
        <div class="navbar__title">{{ title }}</div>
        <div @click="pathTo" class="navbar__right" :style="{ opacity: back ? 0 : 1, backgroundColor: color }"><van-icon
                color="var(--font-color)" size="24rem" name="cart-o" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { withDefaults } from 'vue'
import { useRouter } from 'vue-router'
interface Props {
    back?: boolean,
    color?: string,
    bg?: string
    title?: string
}
const router = useRouter()
const prop = withDefaults(defineProps<Props>(), {
    back: false,
    color: 'var(--background-shop)',
    bg: 'var(--background-color)',
    title: ""
})
const pathTo = () => {
    if (prop.back) return
    router.push('/shopBag')
}
const pathBack = () => {
    if (!prop.back) return
    router.back()
}
</script>

<style lang="scss">
.navbar {
    background-color: var(--background-color);
    color: var(--font-color);
    z-index: 3;
    padding: 20rem;
    height: 37rem;
    @include flex($ai: center, $jc: space-between);
    position: sticky;
    top: 0;
    left: 0;

    &__title {
        font-size: 18rem;
    }

    .navbar__right,
    .navbar__left {
        padding: 8rem;
        background-color: #f5f5f5;
        border-radius: 10rem;
    }

    .navbar__right {
        padding: 8rem 12rem;

    }
}
</style>